@import url("https://fonts.googleapis.com/css?family=Jaldi&display=swap");

body {
  display: flex;
  height: 100vh;
  margin: 0;
  background: #3d3d44;
  font-family: "Jaldi", sans-serif;
  font-size: 14px;
  color: white;
}

#wrapper {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  user-select: none;
}

#info {
  opacity: 0.2;
  margin: 0;
  text-align: center;
}

// VARIABLES (Have fun) ―――――――――――――――――――――――――

$TM-mainTint: #3d3d44;
$TM-backgroundColor: darken($TM-mainTint, 2%);
$TM-borderSize: 9px;
$TM-borderColor: darken($TM-mainTint, 8%);
$TM-width: 25px;
$TM-height: 240px;
$TM-bulbSize: $TM-width * 2;
$TM-radius: 20px;
$TM-graduationsStyle: 2px solid rgba(0, 0, 0, 0.5);
$TM-bulbColor: #3dcadf;
$TM-mercuryColor: linear-gradient(#f17a65, $TM-bulbColor) no-repeat bottom;

// Tooltip

$TM-tooltipColor: rgba(0, 0, 0, 0.7);
$TM-tooltipSize: 1em;
$TM-tooltipRadius: 5px;
$TM-tooltipTopShift: 5px;
$TM-tooltipVerticalPadding: 5px;
$TM-tooltipHorizontalPadding: $TM-tooltipVerticalPadding * 2;
$TM-tooltipLeftShift: 100%;
$TM-tooltipArrowWidth: 1.5; // Higher numbers produce smaller width
$TM-tooltipArrowHeight: 2.2; // Higher numbers produce smaller height

@mixin border() {
  border: $TM-borderSize solid $TM-borderColor;
}

// THERMOMETER ―――――――――――――――――――――――――

#termometer {
  width: $TM-width;
  background: $TM-backgroundColor;
  height: $TM-height;
  position: relative;
  @include border;
  border-radius: $TM-radius;
  z-index: 1;
  margin-bottom: $TM-bulbSize;

  &:before,
  &:after {
    position: absolute;
    content: "";
    border-radius: 50%;
  }

  // Border cover

  &:before {
    width: 100%;
    height: calc($TM-bulbSize / 2 + $TM-borderSize);
    bottom: $TM-borderSize;
    background: $TM-backgroundColor;
    z-index: -1;
  }
  // Bulb

  &:after {
    transform: translateX(-50%);
    width: $TM-bulbSize;
    height: $TM-bulbSize;
    background-color: $TM-bulbColor;
    bottom: -$TM-bulbSize + $TM-borderSize;
    @include border;
    z-index: -3;
    left: 50%;
  }
  #graduations {
    height: 59%;
    top: 20%;
    width: 50%;

    &,
    &:before {
      position: absolute;
      border-top: $TM-graduationsStyle;
      border-bottom: $TM-graduationsStyle;
    }

    &:before {
      content: "";
      height: 34%;
      width: 100%;
      top: 32%;
    }
  }
  #temperature {
    bottom: 0;
    background: $TM-mercuryColor;
    width: 100%;
    border-radius: $TM-radius;
    background-size: 100% $TM-height;
    transition: all 0.2s ease-in-out;

    &,
    &:before,
    &:after {
      position: absolute;
    }

    // Temperature value - Tooltip

    &:before {
      content: attr(data-value);
      background: $TM-tooltipColor;
      color: white;
      z-index: 2;
      padding: $TM-tooltipVerticalPadding $TM-tooltipHorizontalPadding;
      border-radius: $TM-tooltipRadius;
      font-size: $TM-tooltipSize;
      line-height: 1;
      transform: translateY(50%);
      left: calc($TM-tooltipLeftShift + 1em / $TM-tooltipArrowWidth);
      top: calc(-1em + $TM-tooltipTopShift - $TM-tooltipVerticalPadding * 2);
    }

    // Tooltip arrow

    &:after {
      content: "";
      border-top: calc($TM-tooltipSize / $TM-tooltipArrowHeight) solid
        transparent;
      border-bottom: calc($TM-tooltipSize / $TM-tooltipArrowHeight) solid
        transparent;
      border-right: calc($TM-tooltipSize / $TM-tooltipArrowWidth) solid
        $TM-tooltipColor;
      left: $TM-tooltipLeftShift;
      top: calc(
        -1 * $TM-tooltipSize / $TM-tooltipArrowHeight + $TM-tooltipTopShift
      );
    }
  }
}

// PLAYGROUND ―――――――――――――――――――――――――

#playground {
  font-size: 1.1em;

  #range {
    display: flex;

    input[type="text"] {
      width: 2em;
      background: transparent;
      border: none;
      color: inherit;
      font: inherit;
      margin: 0 5px;
      padding: 0px 5px;
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease-in-out;

      &:focus {
        border-color: $TM-bulbColor;
        outline: none;
      }

      &:first-child {
        text-align: right;
      }
    }
  }

  #unit {
    width: 100%;
    margin: 0;
    text-align: center;

    &:hover {
      cursor: pointer;
    }
  }
}

// RANGE ―――――――――――――――――――――――――
// https://github.com/darlanrod/input-range-scss

$track-color: $TM-borderColor !default;
$thumb-color: $TM-bulbColor !default;

$thumb-radius: 12px !default;
$thumb-height: 11px !default;
$thumb-width: 18px !default;
$thumb-shadow-size: 4px !default;
$thumb-shadow-blur: 4px !default;
$thumb-shadow-color: transparent !default;
$thumb-border-width: 0px !default;
$thumb-border-color: $TM-mainTint !default;

$track-width: 100% !default;
$track-height: 10px !default;
$track-shadow-size: 1px !default;
$track-shadow-blur: 1px !default;
$track-shadow-color: transparent !default;
$track-border-width: 2px !default;
$track-border-color: $track-color !default;

$track-radius: 5px !default;
$contrast: 3% !default;
$focusStyle: lighten($track-color, $contrast);

$ie-bottom-track-color: darken($track-color, $contrast) !default;

@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color,
    0 0 $shadow-size lighten($shadow-color, 5%);
}

@mixin track {
  cursor: default;
  height: $track-height;
  transition: all 0.2s ease;
  width: $track-width;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

@mixin thumb($adjustment: 0) {
  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
  background: $thumb-color;
  border: $thumb-border-width solid $thumb-border-color;
  border-radius: $thumb-radius;
  cursor: pointer;
  height: $thumb-height + $adjustment;
  width: $thumb-width + $adjustment;
}

@mixin disabled {
  cursor: not-allowed;
}

input[type="range"] {
  appearance: none;
  background: transparent;
  margin: calc($thumb-height / 2) 0;
  width: $track-width;

  &::-moz-focus-outer {
    border: 0;
  }

  &:hover {
    cursor: pointer;
  }

  &:focus {
    outline: 0;

    &::-webkit-slider-runnable-track {
      background: $focusStyle;
      border-color: $focusStyle;
    }

    &::-ms-fill-lower {
      background: $track-color;
    }

    &::-ms-fill-upper {
      background: $focusStyle;
      border-color: $focusStyle;
    }
  }

  &::-webkit-slider-runnable-track {
    @include track;
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
  }

  &::-webkit-slider-thumb {
    @include thumb;
    -webkit-appearance: none;
    margin-top: calc(
      (-1 * $track-border-width * 2 + $track-height) / 2 -
        calc($thumb-height / 2)
    );
  }

  &::-moz-range-track {
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    @include track;
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
    height: calc($track-height / 2);
  }

  &::-moz-range-thumb {
    @include thumb(-4);
  }

  &::-ms-track {
    @include track;
    background: transparent;
    border-color: transparent;
    border-width: calc($thumb-height / 2) 0;
    color: transparent;
  }

  &::-ms-fill-lower {
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    background: $ie-bottom-track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: ($track-radius * 2);
  }

  &::-ms-fill-upper {
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: ($track-radius * 2);
  }

  &::-ms-thumb {
    @include thumb(-4);
    margin-top: calc($track-height / 4);
  }

  &:disabled {
    &::-webkit-slider-thumb {
      @include disabled;
    }

    &::-moz-range-thumb {
      @include disabled;
    }

    &::-ms-thumb {
      @include disabled;
    }

    &::-webkit-slider-runnable-track {
      @include disabled;
    }

    &::-ms-fill-lower {
      @include disabled;
    }

    &::-ms-fill-upper {
      @include disabled;
    }
  }
}
